<template>



    <a-breadcrumb style="margin: 16px 0">
        <a-breadcrumb-item>管理页</a-breadcrumb-item>
        <a-breadcrumb-item>用户中心</a-breadcrumb-item>
    </a-breadcrumb>
    <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
        <!-- 1.如果跳转该页面不是管理员，则提示没有权限
        2.要是有人知道该路径暴力跳转，则判断有无管理员权限，没有权限进行警告 -->

        <a-input-search style="width: 300px" v-model:value="userName" placeholder="输入用户姓名" enter-button
            @search="onSearch" />

        <div style="height: 10px;"></div>

        <a-table :columns="columns" :data-source="userList">
            <template #headerCell="{ column }">
                <template v-if="column.key === 'userAccount'">
                    <span>
                        <smile-outlined />
                        账号
                    </span>
                </template>
            </template>

            <template #bodyCell="{ column, record }">

                <template v-if="column.key === 'action'">
                    <span>

                        <a-popconfirm title="确定要删除该用户吗?" ok-text="Yes" cancel-text="No" @confirm="confirm(record.id)"
                            @cancel="cancel">
                            <a-button type="primary" danger>删除</a-button>
                        </a-popconfirm>
                    </span>
                </template>
            </template>


        </a-table>


    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { SmileOutlined } from '@ant-design/icons-vue';

const columns = [
    {
        title: '账号',
        dataIndex: 'userAccount',
        key: 'userAccount',
    },
    {
        title: '姓名',
        dataIndex: 'username',
        key: 'username',
    },
    {
        title: '性别',
        dataIndex: 'gender',
        key: 'gender',
    },
    {
        title: '手机号',
        dataIndex: 'phone',
        key: 'phone',
    },
    {
        title: '邮箱',
        dataIndex: 'email',
        key: 'email',
    },
    {
        title: 'Action',
        key: 'action',
    },
];

const userList = ref([])
// 请求参数
const userName = ref('')

import { getUserListApi } from '../api/user'
const getUserList = async () => {
    const res = await getUserListApi(userName.value)
    // console.log(res.data)
    userList.value = res.data
}

onMounted(() => {
    getUserList()
})
import { deleteUserApi } from '../api/user'
import { message } from 'ant-design-vue';
const confirm = async (id: number) => {
    //   console.log(id);
    await deleteUserApi(id)
    getUserList()
    message.success('删除成功');
};

const cancel = () => {
    //   console.log("取消");
    //   message.error('Click on No');
};

const onSearch = async () => {
    const res = await getUserListApi(userName.value)
    userList.value = res.data
};

</script>